<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>猿粪の日记-他的首页</title>
    <base th:href="@{/}">
    <meta charset="utf-8" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
          name="viewport"/>
    <link rel="stylesheet" th:href="@{/bootstrap/sys/css/myZone.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/index/banner.css}">
    <link rel="stylesheet" th:href="@{/bootstrap/css/iconfont/menu/iconfont.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/index/text-effect/linkstyles.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/bootstrap/css/my-layer-div.css}"/>
    <style>
    </style>
</head>
<body>
<div id="header">
    <div class="header_content">
        <div class="header-banner">
            <div class="grid__item color-11">
                <a class="link link--yaku" th:href="@{/}">
                    <span>Y</span><span>u</span><span>a</span><span>n</span>
                </a>
            </div>
        </div>
        <div class="header-opt">
            <ul class="opt_ul">
                <li class="opt_li"><a th:href="@{/}"><i class="iconfont icon-huiyuan"></i>会员</a></li>
                <li class="opt_li"><a th:href="@{/}"><i class="iconfont icon-zhuti1"></i>主题</a></li>
                <li class="opt_li extend"><a th:href="@{/tool/toolNav}"><i class="iconfont icon-xiangzi"></i>工具</a></li>
                <li class="opt_li login" id="login_btn"><a th:href="@{/loginPage}"><i
                        class="iconfont icon-dengru"></i>登入</a></li>
                <li class="opt_li online_opt" id="online_btn">
                <span class="avatar">
                    <!--http://thirdqq.qlogo.cn/g?b=oidb&k=Pf4r0mHoCWm66OovCfEJnQ&s=100&t=1531640597-->
                    <img src="">
                </span>
                    <span class="user_info">
                    <span class="user_item logout"><a th:href="@{/sys/myZone}"><i class="iconfont icon-zhuye1"></i>我的主页</a></span>
                    <span class="user_item logout"><a th:href="@{/sys/userInfo}"><i class="iconfont icon-shezhi"></i>设置</a></span>
                    <span class="user_item logout"><a href="javascript:void(0);"><i class="iconfont icon-bangzhu"></i>帮助</a></span>
                    <span class="user_item logout"><a th:href="@{/signOut}"><i class="iconfont icon-tuichu1"></i>退出</a></span>
                </span>
                </li>
            </ul>
        </div>
    </div>
</div>
<div id="container">
    <!--搜索栏搜索内容-->
    <div id="search_content">
        <div id="user_detail">
            <div class="user_info">
                <h6>PROMULGATOR</h6>
                <div class="promulgator">
                    <span class="avatar">
                        <img id="avatar" alt="头像" src=""/>
                    </span>
                    <div class="matrix">
                        <div class="border border1"></div>
                        <div class="border border2"></div>
                    </div>
                </div>
            </div>
            <div class="user_info name_addr">
                <div class="author">
                    <h4 id="nickName">匿名用户</h4>
                    <span><i class="iconfont icon-dizhi1 mr5"></i><span id="sourceRegion">未知地区</span></span>
                </div>
            </div>
            <div class="user_info">
                <div class="my_life">
                    <span class="ml_l"><i class="iconfont icon-zan"></i>关注他的人数</span>
                    <span class="ml_r gzrs" id="focus">0</span>
                </div>
                <div class="my_life">
                    <span class="ml_l"><i class="iconfont icon-yuedu"></i>总访问量</span>
                    <span class="ml_r zfwl" id="wink">0</span>
                </div>
            </div>
            <!--<div class="user_info name_addr">
                <div class="authentic select_none">
                    <span class="auth_btn vip"><i class="iconfont icon-huiyuan mr5"></i>充值入口</span>
                    <span class="auth_btn publish" id="publish"><i class="iconfont icon-fabu mr5"></i>发布大作</span>
                </div>
            </div>-->
        </div>
        <div id="user_article">
            <!--<div class="content_nav">
                <div class="cur_catalog">
                    <span class="level_second"><i class="iconfont icon-biji mr5"></i>TA的文章</span>
                </div>
                <div class="filter_condition">
                    <ul class="filter_ul">
                        <li class="filter_li"><i class="iconfont icon-fabu"></i>最新发布</li>
                        <li class="filter_li"><i class="iconfont icon-shoucang"></i>收藏最多</li>
                        <li class="filter_li"><i class="iconfont icon-zan"></i>点赞最多</li>
                        <li class="filter_li"><i class="iconfont icon-yuedu1"></i>阅读最多</li>
                    </ul>
                </div>
            </div>-->
            <div class="user_nav">
                <span class="nav_item article active"><i class="iconfont icon-fabu"></i><span>TA的发布</span></span>
                <span class="nav_item article"><i class="iconfont icon-zan"></i><span>TA的收藏</span></span>
            </div>
            <div class="content_area select_none">
                <!--日记模板-->
                <div class="diary_item">
                    <div class="diary_cover">
                        <div class="cover">
                            <div class="cover_content">
                                <div class="title">我和玛利亚</div>
                                <div class="introduce">天天想你想你想你想你, 一想到你我就哦哦噢噢噢噢, 来碗大米酒</div>
                                <div class="archive"><i class="iconfont icon-guidang"></i>舔狗, 虐心, 扎心</div>
                            </div>
                            <div class="diary_info">
                                <div class="diary_statistics">
                            <span class="statistics_block">
                                <i class="iconfont icon-yuedu1"></i>1000
                            </span>
                                    <span class="statistics_block">
                                <i class="iconfont icon-zan"></i>500
                            </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div id="sentinels">
            </div>
        </div>
    </div>
</div>

<div id="footer">
    <div class="stand_by"><span class="support">本文由<a href="javascript:void(0);">兰州</a>提供技术支持</span>赣ICP备20000118号</div>
</div>
<div id="bubble">
    <div class="message">扯淡</div>
</div>
<script type="text/javascript" th:src="@{https://lib.baomitu.com/jquery/3.5.0/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{https://cdn.bootcdn.net/ajax/libs/layer/3.1.1/layer.min.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/js/layopen.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/js/JSONUtil.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/js/AjaxUtil.js}"></script>
<script type="text/javascript" th:src="@{/bootstrap/sys/js/hisArticle-listener.js}"></script>
<script>
    $(document).ready(function () {
        let TOKEN = null, VIEW = null;

        /*回到首页*/
        $('.level_first').on('click', function () {
            $('#search_content').css('display', 'none');
            $('.system_info').css('display', 'block');
        });


        /**
         * 查看详情
         */
        $('#search_content .content_area').on('click', '.diary_item .diary_cover .title', function () {
            window.open('anonymous/showArticle?key=' + $(this).data('id'));
        });

        /**
         * 发布事件
         */
        $('#publish').on('click', function () {
            window.open('sys/publish');
        });


        loadUser();
        customizeData();

        /**
         * 数据
         */
        function customizeData() {
            let test = window.location.href;
            let ring = test.split("?ring=");
            if (ring.length > 1) {
                let mem = ring[1];
                AjaxPost('ring/members', {mem: mem}, function () {
                }, function (result) {
                    VIEW = result.data;
                    $('#avatar').attr("src", VIEW.avatar);
                    $('#nickName').text(VIEW.nickName);
                    $('#sourceRegion')[0].innerText = VIEW.sourceRegion;
                    loadGZRS(VIEW.focus);
                    loadZFWL(VIEW.wink);
                });
            }
        }


        // 标准方法定义
        function loadUser() {
            let url = "getToken";
            $.ajax({
                type: "post",
                url: url,
                data: {},
                dataType: 'json',
                error: function (e) {
                    // 啥也不做, 就当没有发生什么
                    $('#login_btn').css('display', 'block');
                    $('#online_btn').css('display', 'none');
                },
                success: function (result) {
                    result = JSONUtil.parseObj(result);
                    if (parseInt(result.code) === 200) {
                        TOKEN = result.data;
                        $('#login_btn').css('display', 'none');
                        $('#online_btn').css('display', 'block').find(".avatar img").attr('src', TOKEN.avatar);
                        let test = window.location.href;
                        let ring = test.split("?ring=");
                        if (ring.length === 1) {
                            $('#avatar').attr("src", TOKEN.avatar);
                            $('#nickName').text(TOKEN.nickName);
                            $('#sourceRegion')[0].innerText = TOKEN.sourceRegion;
                            loadGZRS(TOKEN.focus);
                            loadZFWL(TOKEN.wink);
                        }
                    } else {
                        console.log("获取当前登入用户异常哦, 请检查你的参数捏!");
                    }
                }
            });
        }

        /**
         * 添加关注人数
         */
        function loadGZRS(gz) {
            let init = 0;
            let $gz = $('.gzrs').eq(0);
            let timer = setInterval(function () {
                if (init >= gz) {
                    clearInterval(timer);
                }
                $gz.text(init);
                init++;
            }, 5);
        }

        /**
         * 添加总访问量
         */
        function loadZFWL(fw) {
            let init = 0;
            let $fw = $('.zfwl').eq(0);
            let timer = setInterval(function () {
                if (init >= fw) {
                    clearInterval(timer);
                }
                $fw.text(init);
                init++;
            }, 5);
        }


        /*需要延迟调用的函数：
       function callinSound(){
           var callin=$('#callin')[0];
           callin.load();
           callin.play();
           //第一次执行完成后返回这个函数
           return callinSound;
       }
        调用方：setInterval(callinSound(),6000);
        首先，调用callinSound（）方法，然后延迟执行。*/

    });
</script>
</body>
</html>